<template>
  <div>
     <div>
      <!-- 添加的表单 -->
        <el-form ref="stuForm" inline :model="addObj" :rules="rules">
            <el-form-item prop="adduserName">
            <el-input placeholder="用户名" v-model="addObj.adduserName"></el-input>
            </el-form-item>
            <el-form-item prop="addphone">
              <el-input v-model="addObj.addphone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="addemail">
              <el-input v-model="addObj.addemail"  placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="toAdd"
              v-power>添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询的表单 -->
        <el-form inline>
          <el-form-item>
            <el-input placeholder="用户名" v-model="seaUserName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="seaPhone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="seaEmail" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-power type="success" @click="toSearch">查询</el-button>
            </el-form-item>
        </el-form>
     </div>
     <div>
      <table-title icon="el-icon-platform-eleme"    title="学员列表">
        </table-title>
        <el-table border stripe :data="stuList">
           <el-table-column label="用户名" prop="userName"></el-table-column>
             <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="注册日期">
                <template slot-scope="scope">
                  <div>
                    <!-- 用作用域插槽 拿到当前行的日期 -->
                      {{new Date(scope.row.createAt).toLocaleString()}}
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="是否冻结">
                  <template slot-scope="scope">
                    <div>
                      <el-link> {{scope.row.isstate?'冻结':'可用'}}</el-link>
                    </div>
                  </template>
            </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div>
                      <el-link :type="scope.row.isstate?'success':'danger'"
                      @click="toFrezee(scope.row.tokenId)"
                      >{{scope.row.isstate?'解冻':'冻结'}}</el-link>
                  </div>
                </template>
              </el-table-column>

        </el-table>
        <el-pagination background :total="total" :page-size="pageSize"
         :current-page="pageStart"
         @current-change="pageChange">

        </el-pagination>
     </div> 
  </div>
</template>

<script>
import {addStuApi,getStuApi,FrezeStu} from '../../api/student.js'
export default {
  name: 'Vuepro2209Index',

  data() {
    return {
      stuList:[],//学员列表
      total:0,//数据总条数
      pageSize:3,//每页的条数
      pageStart:1,//当前页码
      seaUserName:"",//查询的用户名
      seaPhone:"",//查询手机号
      seaEmail:"",//查询的邮箱
      addObj:{ //v-model的数据
        addemail:"",
        adduserName:"",
        addphone:""
      },
      rules:{ //表单的验证规则
      addemail:[{required:true,message:"邮箱必填",    trigger:'blur'}],
        adduserName:[{required:true,message:"用户名必填",trigger:'blur'}],
        addphone:[{required:true,message:"手机号必填",trigger:'blur'}]
      }
    };
  },
  created(){
    this.getStuList();
  },
  mounted() {
 
  },

  methods: {
    async toFrezee(tokenId){ //冻结解冻方法
      let res=await FrezeStu(tokenId)
       console.log(res);
       if(res.data.success){
         this.$message.success("操作成功")
          this.getStuList();//重新调用列表
       }
      
    },
    toSearch(){ //点击搜索  从新调用列表
      this.getStuList(); 
      this.seaUserName=""
      this.seaPhone=""
      this.seaEmail=""
    },
    pageChange(val){ //分页改变事件
      // val--当前页码 
      this.pageStart=val;
      this.getStuList();
    },
    async getStuList(){ //获取学员列表
      let res=await getStuApi({
        pageStart:this.pageStart,
        userName:this.seaUserName,
        phone:this.seaPhone,
        email:this.seaEmail
      })
      console.log(res)
      // 存储后台返回的数据的 列表 数据条数  一页条数据
      this.stuList=res.data.data.list;
      this.total=res.data.data.count;
      this.pageSize=res.data.data.pageSize;
    },
     toAdd(){ //添加接口
      // 表单整体验证方法
      this.$refs.stuForm.validate().then(async  ()=>{
              let res=await addStuApi(this.addObj)
              console.log(res)
              if(res.data.success){
                this.$message.success("添加成功")
                // 调用表单组件自带的重置方法
                this.$refs.stuForm.resetFields();
                this.getStuList();//重新调用列表
              }
      })
  
    }
  },
};
</script>